<template>
    <div class="yearlyOutput-container">
        <div class="chart" id="chart_right2"></div>
    </div>
</template>

<script>
    // 政府部门大屏右2折线：近一年五种医疗废物产量
    import echarts from 'echarts'
    import { getAction } from '@/api/manage'

    export default {
        name: 'yearlyOutput',
        props: {
            // 父组件传递过来的值
            areaCode: {
                type: String,
                default: ''
            },
            areaLevel: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                data: 0, // 从后台返回时的总数据
                month: null,// x轴的数据月份
                weightByMonth: null,// 根据月份查询医废重量
                infectiousWeight: null,
                traumaticWeight: null,
                pathologicalWeight: null,
                medicatedWeight: null,
                chemicalWeight: null
            }
        },
        mounted() {
            //参数赋值
            this.getStatisticsData()
        },
        watch: {
            // 如果 `areaCode` 发生改变，这个函数就会运行
            areaCode: function(newValue, oldValue) {
                this.getStatisticsData()
            },
        },
        methods: {
            async getStatisticsData() {
                let params = {
                    areaCode: this.areaCode,
                    areaLevel: this.areaLevel
                }
                let res = await getAction('/hc/Statistical/monthlyStatistics', params)
                if (res && res.success) {
                    let data = res.result || []
                    // console.log('年份查询data重量:', data);
                    // 根据月份查询医废重量数组

                    this.month = [];
                    this.infectiousWeight = [];
                    this.traumaticWeight = [];
                    this.pathologicalWeight = [];
                    this.medicatedWeight = [];
                    this.chemicalWeight = [];

                    let num = 0;
                    data.forEach((item) => {
                        num += (item.infectiousWeight+ item.traumaticWeight+ item.pathologicalWeight+ item.medicatedWeight+ item.chemicalWeight);
                        if(num > 0){
                            // 日期组成的数组
                            this.month.push(item.create_time)
                            // 感染性重量
                            this.infectiousWeight.push(item.infectiousWeight)
                            // 损伤性重量
                            this.traumaticWeight.push(item.traumaticWeight)
                            // 病理性重量
                            this.pathologicalWeight.push(item.pathologicalWeight)
                            // 药物性重量
                            this.medicatedWeight.push(item.medicatedWeight)
                            // 化学性重量
                            this.chemicalWeight.push(item.chemicalWeight)
                        }
                    });
                    // // 日期组成的数组
                    // this.month = data.map(item => item.create_time)
                    // // 感染性重量
                    // this.infectiousWeight = data.map(item => item.infectiousWeight)
                    // // 损伤性重量
                    // this.traumaticWeight = data.map(item => item.traumaticWeight)
                    // // 病理性重量
                    // this.pathologicalWeight = data.map(item => item.pathologicalWeight)
                    // // 药物性重量
                    // this.medicatedWeight = data.map(item => item.medicatedWeight)
                    // // 化学性重量
                    // this.chemicalWeight = data.map(item => item.chemicalWeight)
                }
                // console.log('感染性重量:', this.infectiousWeight)
                this.getEchartRight2()
            },

            getEchartRight2() {
                let myChart = this.$echarts.init(document.getElementById('chart_right2'))
                let color = ['#1a9bfc', '#99da69', '#7049f0', '#fa704d', '#01babc']
                let xData = this.month
                let name = ['感染性', '损伤性', '病理性', '药物性', '化学性']
                let data = [this.infectiousWeight,
                    this.traumaticWeight,
                    this.pathologicalWeight,
                    this.medicatedWeight,
                    this.chemicalWeight
                ]

                let series = []
                for (let i = 0; i < 5; i++) {
                    series.push({
                        name: name[i],
                        type: 'line',
                        symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
                        symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                        smooth: true, //是否平滑曲线显示
                        showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: color[i]
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(255,255,255,0)'
                                }], false),
                                // shadowColor: 'rgba(255,255,255, 0.1)',
                                shadowBlur: 10,
                                opacity: 0.3
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: color[i],
                                lineStyle: {
                                    width: 1,
                                    type: 'solid' //'dotted'虚线 'solid'实线
                                },
                                borderColor: color[i], //图形的描边颜色。支持的格式同 color
                                borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ]
                                barBorderRadius: 0,
                                label: {
                                    show: false
                                },
                                opacity: 0.5
                            }
                        },
                        data: data[i]

                    })
                }
                let option = {
                    // 图例组件
                    legend: {
                        right: 1,
                        // 图例每项之间的间隔
                        itemGap: 15,
                        // 图例标记的图形宽度
                        itemWidth: 5,
                        // 图例的公用文本样式
                        textStyle: {
                            color: '#fff',
                            fontSize: '12'
                        },
                        // 图例的数据数组
                        data: name
                    },

                    // 提示框
                    tooltip: {
                        // 触发类型
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
                            lineStyle: {
                                color: '#57617B'
                            }
                        },
                        formatter: '{b}<br />{a0}: {c0}kg<br />{a1}: {c1}kg<br />{a2}: {c2}kg<br />{a3}: {c3}kg<br />{a4}: {c4}kg',
                        backgroundColor: 'rgba(0,0,0,0.7)', // 背景
                        padding: [8, 10], //内边距
                        extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);' //添加阴影
                    },
                    // 直角坐标系内绘图网格
                    grid: {
                        borderWidth: 0,
                        top: 10,
                        bottom: 40,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    xAxis: [{
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: '#32346c'
                            }
                        },

                        boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
                        axisTick: {
                            show: false
                        },
                        splitArea: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 40,
                            inside: false,
                            textStyle: {
                                color: '#eee',
                                fontWeight: 'normal',
                                fontSize: '12'
                            }
                        },
                        data: xData
                    }],
                    yAxis: {
                        type: 'value',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#32346c'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#eee',
                                fontWeight: 'normal',
                                fontSize: '12'
                            },
                            formatter: '{value}'
                        }
                    },
                    series: series
                }

                myChart.setOption(option, true)
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            },

            //实例销毁后触发
            destroyed() {
                // 在组建销毁时把定时任务取消
                clearInterval(this.timer)

            }
        }
    }
</script>

<style lang="less" scoped>
    .yearlyOutput-container {
        .chart {
            height: 3rem;


        }
    }
</style>
